<template>
    <nly-content-wrapper>
        <nly-content>
            <div style="margin-top: 42px; border:1px solid #ccc;">
                <a-tabs @change="callback" v-model="tabKey">
                    <a-tab-pane key="1" tab="账户信息">
                        <div style="width: 500px;">
                            <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" class="user-class">
                                <a-form-item label="单位名称">
                                    <div style="float:left">{{userInfo.companyName}}</div>
                                    <div class="div-class" @click="() => {companyNameVisible = true}">
                                        <a-button type="primary" class="btn-click">更改名称</a-button>
                                    </div>
                                </a-form-item>
                                <a-form-item label="使用产品">
                                    <div style="float:left">{{userInfo_temp.goodsName}}</div>
                                </a-form-item>
                                <a-form-item label="免费用户数">
                                    {{userInfo.freeUser}}
                                </a-form-item>
                                <a-form-item label="授权用户数">
                                    <div style="float:left">
                                        {{userInfo.companyUser}}
                                        <span style="margin-left: 50px;">到期日期: {{userInfo.endDate}}</span>
                                    </div>
                                    <div class="div-class" @click="renewGoods">
                                        <a-button type="primary" class="btn-click">{{btnName}}</a-button>
                                    </div>
                                </a-form-item>
                                <a-form-item label="授权密钥">
                                    <div style="float:left">{{userInfo.secretKey}}</div>
                                    <div :class="keyClass" @click="() => {secretKeyVisible = true}">
                                        <a-button type="primary" class="btn-click">更换密钥</a-button>
                                    </div>
                                </a-form-item>
                            </a-form>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="产品" style="overflow-y: scroll;height: calc(100vh - 150px);">
                        <a-row :span="24" style="margin-top: 20px; ">
                            <a-col class="goods-box" :xl="12" :xxl="8" v-for="(item, index) in data" :key="index">
                                <div class="gutter-box">
                                    <div class="gutter-title">
                                        <label>{{item.goodsName}}</label>
                                    </div>
                                    <div class="gutter-img">
                                        <img src="@/assets/image/order.png" />
                                    </div>
                                    <div class="first-tit">
                                        <p class="i-tit">
                                            <a-icon theme="outlined" style="font-size:18px;font-weight:bold;width: 20px;height: 20px;margin-right: 6px;vertical-align: text-top;color:#FF6B00" type="schedule" />
                                            产品简介
                                        </p>
                                        <div class="goods-li">
                                            <div v-html="item.remarks"></div>
                                        </div>
                                    </div>
                                    <div class="tag-this" v-if="userInfo_temp.goodsId == item.id">
                                        正在使用...
                                    </div>
                                    <div v-else class="buy-div" @click="useGoods(item)">开始使用</div>
                                </div>
                                <div v-if="item.copyright" class="copyright-box">{{item.copyright}} 版权所有</div>
                                <div v-else class="copyright-box-null">&nbsp;</div>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <!-- <a-tab-pane key="3" tab="商城">
                        333
                    </a-tab-pane>
                    <a-tab-pane key="4" tab="财务信息">
                        <div style="margin-top: -50px;">
                            <nly-content-wrapper style="margin-left: -10px;">
                                <nly-content>
                                    <a-table :columns="orderColumns" :components="orderComponents" :data-source="orderData" :scroll="{x: 500, y: 500}" bordered :pagination="false"></a-table>
                                </nly-content>
                            </nly-content-wrapper>
                        </div>
                    </a-tab-pane> -->
                </a-tabs>
            </div>
            <!-- 商品购买 -->
            <a-modal v-model="goodsVisible" title="商品购买" centered on-ok="handleok" width="90%">
                <div class="gutter-example" style="width: 100%;margin-left: 15%;">
                    <a-row :gutter="16" style="margin-top: 20px;">
                        <a-col class="gutter-row" :span="6" v-for="(item, index) in data" v-show="index <= 2" :key="index">
                            <div class="gutter-box">
                                <div style="margin-top: 10px;"><img src="@/assets/image/order.png"></div>
                                <div style=""><label>{{item.goodsName}}</label></div>
                                <ul class="googs-ul">
                                    <li>用户数量：{{item.users}}</li>
                                    <li>商品价格：￥{{item.price}}</li>
                                    <li>使用年限：
                                        <select @change="useYearChang($event, item)">
                                            <option v-for="(year, index) in config" :key="index" :value="year.years">{{year.years}}年</option>
                                        </select>
                                    </li>
                                    <li>商品折扣：{{item.discountRate ? item.discountRate : config.find(f => f.years == item.years)?config.find(f => f.years == item.years).discountRate:''}}</li>
                                    <li>支付金额：￥{{item.salePrice ? item.salePrice : parseFloat(item.price) * parseFloat(item.discountRate ? item.discountRate : config.find(f => f.years == item.years)?config.find(f => f.years == item.years).discountRate:'') * 0.01}}
                                    </li>
                                </ul>
                                <div class="buy-div" @click="buyGoods(item)">购买</div>
                            </div>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16" style="margin-top: 20px;">
                        <a-col class="gutter-row" :span="6" v-for="(item, index) in data" v-show="index >= 3" :key="index">
                            <div class="gutter-box">
                                <div style="margin-top: 10px;"><img src="@/assets/image/order.png"></div>
                                <div style=""><label>{{item.goodsName}}</label></div>
                                <ul class="googs-ul">
                                    <li>用户数量：{{item.users}}</li>
                                    <li>商品价格：￥{{item.price}}</li>
                                    <li>
                                        使用年限：
                                        <select @change="useYearChang($event, item)">
                                            <option v-for="(year, index) in config" :key="index" :value="year.years">{{year.years}}年</option>
                                        </select>
                                    </li>
                                    <li>商品折扣：{{item.discountRate ? item.discountRate : item.discountRate = config.find(f => f.years == item.years)?config.find(f => f.years == item.years).discountRate:''}}</li>
                                    <li>支付金额：￥{{item.salePrice ? item.salePrice : parseFloat(item.price) * parseFloat(item.discountRate ? item.discountRate : config.find(f => f.years == item.years)?config.find(f => f.years == item.years).discountRate:'') * 0.01}}
                                    </li>
                                </ul>
                                <div class="buy-div" @click="buyGoods(item)">购买</div>
                            </div>
                        </a-col>
                    </a-row>
                </div>
                <template slot="footer">
                    <!-- <a-button key="submit" type="primary" @click="pay">立即支付</a-button> -->
                    <a-button key="back" @click="() => (goodsVisible = false)">关闭</a-button>
                </template>
            </a-modal>
            <!-- 订单确认 -->
            <a-modal v-model="buyVisible" title="订单确认" centered on-ok="handleok" width="950px">
                <div class="line" style="color:#1980Ff;font-size:15px;">商品信息</div>
                <div id="components-form-demo-advanced-search">
                    <a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 24 }">
                        <a-row :gutter="24">
                            <a-col :span="10">
                                <a-form-item label="商品名称">{{goodsInfo.goodsName}}</a-form-item>
                            </a-col>
                            <a-col :span="10" :push="2">
                                <a-form-item label="用户数量">
                                    <a-input-number id="inputNumber" v-model="goodsInfo.users" :min="5" @change="goodsChange" :disabled="true" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10">
                                <a-form-item label="使用年限">
                                    <a-input-number id="inputNumber" v-model="goodsInfo.years" :min="1" @change="goodsChange" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" :push="2">
                                <a-form-item label="折扣" v-if="goodsInfo">{{goodsInfo.discountRate}}</a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10">
                                <a-form-item label="商品原价">￥{{goodsInfo.price}}</a-form-item>
                            </a-col>
                            <a-col :span="10" :push="2">
                                <a-form-item label="实际支付">￥{{goodsInfo.salePrice}}</a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="22" :pull="3">
                                <a-form-item label="产品简介">
                                    <div v-html="goodsInfo.remarks">

                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                    <div class="line" style="color:#1980Ff;font-size:15px;">支付条款</div>
                    <div style="margin-top:20px;margin-left:50px;">
                        <a-checkbox v-model="agreeCheck">
                            <span style="color:red;">本商品一旦出售，将不能退款</span>
                        </a-checkbox>
                    </div>
                    <div class="line" style="color:#1980Ff;font-size:15px;margin-top:30px;">账户余额</div>
                    <div style="margin-top:20px;margin-left:50px;">
                        <span class="balance">{{accountData.balance || "0.00"}} 元</span>
                    </div>
                    <!-- <div class="line" style="color:#1980Ff;font-size:15px;margin-top:30px;">支付方式</div>
                    <div style="margin-top:20px;margin-left:50px;">
                        <a-radio-group v-model="payMethod">
                            <a-radio :value="1">
                                <img src="@/assets/image/alipay.png" />
                            </a-radio>
                            <a-radio :value="2">
                                <img src="@/assets/image/wxpay.png" style="height: 25px;" />
                            </a-radio>
                        </a-radio-group>
                    </div> -->
                </div>
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="pay">立即购买</a-button>
                    <a-button key="back" @click="() => (buyVisible = false)">取消</a-button>
                </template>
            </a-modal>
            <!-- 续费产品 -->
            <a-modal v-model="renewVisible" title="续费产品" centered on-ok="handleok" width="950px">
                <div class="line" style="color:#1980Ff;font-size:15px;">商品信息</div>
                <div id="components-form-demo-advanced-search">
                    <a-form class="ant-advanced-search-form" :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 24 }">
                        <a-row :gutter="24">
                            <a-col :span="10">
                                <a-form-item label="商品名称">{{goodsInfo.goodsName}}</a-form-item>
                            </a-col>
                            <a-col :span="10" :push="2">
                                <a-form-item label="升级用户数量">
                                    <a-input-number id="inputNumber" v-model="goodsInfo.users" :min="0" @change="goodsRenewChange" />
                                    <span style="color: red;">当前用户数：{{userInfo.companyUser}}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10">
                                <a-form-item label="续费年限">
                                    <a-input-number id="inputNumber" v-model="goodsInfo.years" :min="0" @change="goodsRenewChange" />
                                    <span style="color: red;">到期时间：{{userInfo.endDate}}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" :push="2">
                                <a-form-item label="折扣" v-if="goodsInfo">{{goodsInfo.discountRate}}</a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="10">
                                <a-form-item label="商品原价">￥{{goodsInfo.price}}</a-form-item>
                            </a-col>
                            <a-col :span="10" :push="2">
                                <a-form-item label="实际支付">￥{{goodsInfo.salePrice}}</a-form-item>
                            </a-col>
                        </a-row>
                        <a-row :gutter="24">
                            <a-col :span="20" :pull="3">
                                <a-form-item label="产品简介">
                                    <div v-html="goodsInfo.remarks">

                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                    <div class="line" style="color:#1980Ff;font-size:15px;">支付条款</div>
                    <div style="margin-top:20px;margin-left:50px;">
                        <a-checkbox v-model="agreeCheck">
                            <span style="color:red;">本商品一旦出售，将不能退款</span>
                        </a-checkbox>
                    </div>
                    <div class="line" style="color:#1980Ff;font-size:15px;margin-top:30px;">账户余额</div>
                    <div style="margin-top:20px;margin-left:50px;">
                        <span class="balance">{{accountData.balance || "0.00"}} 元</span>
                    </div>
                    <!-- <div class="line" style="color:#1980Ff;font-size:15px;margin-top:30px;">支付方式</div>
                    <div style="margin-top:20px;margin-left:50px;">
                        <a-radio-group v-model="payMethod">
                            <a-radio :value="1">
                                <img src="@/assets/image/alipay.png" />
                            </a-radio>
                            <a-radio :value="2">
                                <img src="@/assets/image/wxpay.png" style="height: 25px;" />
                            </a-radio>
                        </a-radio-group>
                    </div> -->
                </div>
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="renewPay">立即升级</a-button>
                    <a-button key="back" @click="() => (renewVisible = false)">取消</a-button>
                </template>
            </a-modal>
            <!-- 微信支付 二维码 -->
            <a-modal v-model="wxPayVisible" title="微信支付" centered on-ok="handleok" width="800px">
                <div>
                    <!-- <span>应付金额2599.00元</span>  -->
                </div>
                <div style="margin-top: 20px;">
                    <img style="margin-left: 40px; height: 250px; width: 250px" :src="payCodeImg">
                    <img style="margin-left: 40px; height: 300px;" src="@/assets/image/pc_icon_phone-bg.png">
                </div>
                <template slot="footer">
                    <a-button key="back" @click="() => (wxPayVisible = false)">取消</a-button>
                </template>
            </a-modal>
            <!-- 更换系统密钥 -->
            <a-modal v-model="secretKeyVisible" title="更换系统密钥" centered>
                <a-input v-model="secretKey" placeholder="请输入产品密钥" />
                <div style="color: red;margin-top:10px;">*说明: 购买商品后密钥会自动更改</div>
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="updateSecretKey">立即更换</a-button>
                    <a-button key="back" @click="() => (secretKeyVisible = false)">取消</a-button>
                </template>
            </a-modal>
            <!-- 更改单位名称 -->
            <a-modal v-model="companyNameVisible" title="更改单位名称" centered>
                <a-input v-model="userInfo.companyName" placeholder="请输入单位名称" />
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="updateCompanyName">立即更改</a-button>
                    <a-button key="back" @click="() => (companyNameVisible = false)">取消</a-button>
                </template>
            </a-modal>
        </nly-content>
    </nly-content-wrapper>
</template>

<script>
import { getCompanyInfo, updateSecretKey, updateCompanyName } from "@/api/companyInfo";
import { pageList, useGoods } from "@/api/member/goods";
import { orderPage, saveOrder, aliPay, wxPay, saveRenewOrder, getOrderDetail } from "@/api/member/order";
import { configList } from "@/api/member/config";
import { components } from "@/utils/antTableComponents";
import { mapState } from "vuex";

import { getByCompany } from "@/api/expenses/expensesAccount";

export default {
    data () {
        //订单table列
        const orderColumns = [
            {
                title: "订单号",
                dataIndex: "orderNo",
                key: "orderNo",
                align: "left",
                width: 120
            },
            {
                title: "订单日期",
                dataIndex: "createDate",
                key: "createDate",
                width: 120
            },
            {
                title: "商品名称",
                dataIndex: "goodsName",
                key: "goodsName",
                width: 120
            },
            {
                title: "用户数量",
                dataIndex: "users",
                key: "users",
                width: 80
            },
            {
                title: "使用年限",
                dataIndex: "years",
                key: "years",
                width: 80
            },
            {
                title: "折扣",
                dataIndex: "discountRate",
                key: "discountRate",
                width: 80
            },
            {
                title: "付款金额",
                dataIndex: "salePrice",
                key: "salePrice",
                width: 80
            },
            {
                title: "付款状态",
                dataIndex: "orderStatus",
                key: "orderStatus",
                width: 80,
                customRender: (text, row, index) => {
                    return text ? "已付款" : "未付款";
                }
            },
            {
                title: "付款时间",
                dataIndex: "payDate",
                key: "payDate",
                width: 120,
                customRender: (text, row, index) => {
                    return text;
                }
            },
            {
                title: "密钥",
                dataIndex: "secretKey",
                key: "secretKey",
                width: 120,
                customRender: (text, row, index) => {
                    return text;
                }
            },
            {
                title: "操作",
                dataIndex: "id",
                key: "id",
                width: 80,
                customRender: (text, row, index) => {
                    if (!row.orderStatus) {
                        return (
                            <div class="icons-list">
                                <a
                                    href="javascript:;"
                                    title="支付"
                                    class="mr-1 col-1"
                                    onClick={() => this.payGoods(row)}
                                >
                                    支付
                                </a>
                            </div>
                        );
                    }
                }
            }
        ];

        //表格 头部 可伸缩
        this.orderComponents = components(orderColumns);
        return {
            accountData: {
                balance: 0.00
            },                    //账户余额
            postData: {
                "current": 1,
                "size": 20,
                goodsType: 'software'//商品分类 软件 software 话费 telCharges"
            },
            loading: false,
            imageUrl: "",
            userInfo: {}, //基本信息
            goodsInfo: {},
            orderColumns,
            data: [], //商品列表数据
            orderData: [], //订单列表数据
            form: this.$form.createForm(this, { name: "coordinated" }),
            buyVisible: false, //购买商品弹窗
            agreeCheck: false, //支付条款
            secretKeyVisible: false, //更换密钥弹窗
            companyNameVisible: false, //更改单位名称弹窗
            renewVisible: false, //续费产品弹窗
            goodsVisible: false,
            tabKey: "1",
            secretKey: "",
            btnName: "购买/升级",
            config: [],
            keyClass: "div-class",
            discountRate: 0,
            payMethod: null, //支付方式
            wxPayVisible: false,
            payCodeImg: "", //微信支付二维码
            // thisGoods: null,//当前正在使用的产品
        };
    },
    computed: {
        ...mapState({
            userInfo_temp: state => state.user.info,
            permissions: state => state.user.permissions,
        })
    },
    activated () {
        this.reloadData();
    },
    created () {
        //this.getCompanyInfo();
        // this.PageList();
        this.getConfigList();
    },
    mounted () {
        if (this.userInfo_temp.roles[0] == "普通角色") {
            this.callback('2')
        }
        // this.tabKey = '2';
    },
    methods: {
        reloadData () {
            this.getCompanyInfo();
            this.getAccount();
        },
        //获取账户余额
        getAccount () {
            getByCompany().then(response => {
                if (response.code === 200) {
                    this.accountData = response.data;
                    console.log("获取账户余额", this.accountData);
                }
            });
        },
        //基本信息
        getCompanyInfo () {
            getCompanyInfo().then(response => {
                if (response.code == 200) {
                    this.userInfo = { ...response.data };
                    if (this.userInfo.secretKey) {
                        this.keyClass = "div-class";
                    } else {
                        this.keyClass = "key-class";
                    }
                    if (this.userInfo.type == 1) {
                        this.btnName = "购买/升级";
                    }
                }
            });
        },
        //商品配置
        getConfigList () {
            configList().then(response => {
                if (response.code == 200) {
                    this.config = response.data;
                    console.log(this.config);
                }
            });
        },
        //保存用户信息
        saveUserInfo () { },
        callback (key) {
            console.log(key);
            this.tabKey = key;
            if (key == 2) {
                this.PageList();
            } else if (key == 3) {
                // this.orderPage();
            }
        },
        //获取商品列表
        PageList () {
            const { postData } = this;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    // const { data } = response;
                    // const { records, total, current, size } = data;
                    this.data = response.data;
                    // this.data.forEach(item => {
                    //     if (item.roleName == this.userInfo_temp.roles[0]) {
                    //         this.thisGoods = item.goodsName;
                    //     }
                    // });
                }
            }).catch(error => { });
        },
        //获取订单列表
        orderPage () {
            const { postData } = this;
            orderPage(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.orderData = records;
                    console.log("this.data == ", this.orderData);
                }
            }).catch(error => { });
        },
        //获取订单
        buyGoods (data) {
            console.log(data);
            this.buyVisible = true;
            this.goodsInfo = { ...data };
            this.goodsInfo.salePrice =
                this.goodsInfo.price *
                this.goodsInfo.years *
                ((this.goodsInfo.discountRate) * 0.01);
        },
        //购买商品支付
        pay () {
            console.log("商品支付", this.agreeCheck, this.payMethod);
            let { accountData } = this;
            if (!this.agreeCheck) {
                this.$message.warn("请同意支付条款");
                return;
            }
            if (accountData.balance < this.goodsInfo.salePrice) {
                this.$message.warn("余额不足，请充值");
                return;
            }

            this.goodsInfo.createDate = null;
            this.goodsInfo.goodsId = this.goodsInfo.id;
            this.goodsInfo.orderType = 2; //订单类型 1购买 2升级 3.续费
            this.goodsInfo.orderBusinessType = "Goods";
            saveOrder(this.goodsInfo).then(response => {
                if (response.code == 200) {
                    this.$message.success("购买成功");
                    this.renewVisible = false;
                    this.wxPayVisible = false;
                    this.buyVisible = false;
                    this.goodsVisible = false;
                    this.reloadData();
                    // let orderId = response.data.id;
                    // if (this.payMethod == 1) { //支付宝支付
                    //     aliPay({
                    //         orderId: orderId,
                    //         subjectName: response.data.goodsName
                    //     }).then(response => {
                    //         this.gotoPayUrl(response);
                    //     });
                    // } else { //微信支付
                    //     wxPay({
                    //         orderId: orderId
                    //     }).then(response => {
                    //         console.log(response);
                    //         this.payCodeImg = response.data;
                    //         this.wxPayVisible = true;
                    //         let wxPayInterval = window.setInterval(() => {
                    //             setTimeout(this.wxPayResult(wxPayInterval, orderId), 0);
                    //         }, 5000)
                    //     });
                    // }
                }
            });
        },
        //续费产品支付
        renewPay () {
            let { accountData } = this;
            if (!this.agreeCheck) {
                this.$message.warn("请同意支付条款");
                return;
            }
            if (accountData.balance < this.goodsInfo.salePrice) {
                this.$message.warn("余额不足，请充值");
                return;
            }

            this.goodsInfo.createDate = null;
            this.goodsInfo.secretKey = this.userInfo.secretKey;
            this.goodsInfo.secretKeyId = this.userInfo.secretKeyId;
            this.goodsInfo.goodsId = this.userInfo.goodsId;
            this.goodsInfo.orderType = 2;
            this.goodsInfo.orderBusinessType = "Goods";
            saveRenewOrder(this.goodsInfo).then(response => {
                if (response.code == 200) {
                    this.$message.success("购买成功");
                    this.renewVisible = false;
                    this.wxPayVisible = false;
                    this.buyVisible = false;
                    this.goodsVisible = false;
                    this.reloadData();
                    //     let orderId = response.data.id;
                    //     if (this.payMethod == 1) { //支付宝支付
                    //         aliPay({
                    //             orderId: orderId
                    //         }).then(response => {
                    //             this.gotoPayUrl(response);
                    //         });
                    //     } else { //微信支付
                    //         wxPay({
                    //             orderId: orderId
                    //         }).then(response => {
                    //             console.log(response);
                    //             this.payCodeImg = response.data;
                    //             this.wxPayVisible = true;
                    //             let wxPayInterval = window.setInterval(() => {
                    //                 setTimeout(this.wxPayResult(wxPayInterval, orderId), 0);
                    //             }, 5000)
                    //         });
                    //     }
                }
            });
        },
        //微信支付结果
        wxPayResult (wxPayInterval, orderId) {
            console.log("==============请求成功==============");
            getOrderDetail({ orderId: orderId }).then(res => {
                if (res.code == 200) {
                    if (res.data.orderStatus == 1) {
                        this.$message.success("支付成功");
                        this.renewVisible = false;
                        this.wxPayVisible = false;
                        this.buyVisible = false;
                        this.goodsVisible = false;
                        this.getCompanyInfo();
                        clearInterval(wxPayInterval);
                    }
                } else {
                    clearInterval(wxPayInterval);
                }
            });
        },
        //订单支付
        payGoods (data) {
            aliPay({
                orderId: data.id,
                subjectName: data.goodsName
            }).then(response => {
                this.gotoPayUrl(response);
            });
        },
        gotoPayUrl (response) {
            var win = window.open("", "支付");
            win.document.open();
            win.document.write(response);
            win.document.close();
            this.buyVisible = false;
            this.renewVisible = false;
            this.goodsVisible = false;
        },
        //商品购买价钱
        goodsChange (value) {
            this.changeRate();
            this.goodsInfo.salePrice =
                (this.goodsInfo.price *
                    this.goodsInfo.years *
                    ((this.goodsInfo.discountRate) * 0.01)).toFixed(0);
        },
        //商品续费价钱
        goodsRenewChange (value) {
            this.changeRate();
            let price = (this.userInfo.goods.price / 12.0 / this.userInfo.goods.users);
            let salePrice = 0;
            if (this.goodsInfo.users != 0) {
                salePrice += this.goodsInfo.users * price * this.userInfo.months;
            }
            if (this.goodsInfo.years != 0) {
                salePrice += (this.goodsInfo.users + this.userInfo.companyUser) * price * this.goodsInfo.years * 12 * ((this.goodsInfo.discountRate) * 0.01);
            }
            this.goodsInfo.salePrice = salePrice.toFixed(2);
        },
        //改变折扣
        changeRate () {
            this.goodsInfo.discountRate = 0;
            if (this.config.length > 0 && this.goodsInfo.years > 0) {
                let config = this.config.find(f => f.years == this.goodsInfo.years);
                if (config != null) {
                    this.goodsInfo.discountRate = config.discountRate;
                } else {
                    this.goodsInfo.discountRate = this.config[this.config.length - 1].discountRate;
                }
            }
        },
        //更换密钥
        updateSecretKey () {
            if (!this.secretKey) {
                this.$message.warn("秘钥不能为空");
                return;
            }
            updateSecretKey({ secretKey: this.secretKey }).then(response => {
                if (response.code == 200) {
                    this.$message.success("更换成功");
                    this.secretKeyVisible = false;
                    this.secretKey = "";
                    this.reloadData();
                }
            });
        },
        //更改公司名称
        updateCompanyName () {
            if (!this.userInfo.companyName) {
                this.$message.warn("单位名称不能为空");
                return;
            }
            updateCompanyName({ companyName: this.userInfo.companyName }).then(
                response => {
                    if (response.code == 200) {
                        this.$message.success("更换成功");
                        this.companyNameVisible = false;
                    }
                    this.reloadData();
                }
            );
        },
        //续费商品
        renewGoods () {
            if (!(this.userInfo.type == 1)) {
                //this.goodsVisible = true;

                this.$router.push(`/views/system/goods/list`)
            } else {
                this.renewVisible = true;
                this.goodsInfo = { ...this.userInfo.goods };
                this.goodsInfo.years = 0;
                this.goodsRenewChange();
            }
        },
        //商品列表改变年限
        useYearChang (e, item) {
            item.years = e.target.value;
            item.discountRate = this.config.find(f => f.years == item.years).discountRate;
            item.salePrice = (parseFloat(item.years) * parseFloat(item.price) * parseFloat(item.discountRate) * 0.01).toFixed(2);
        },
        useGoods (item) {
            //开始使用产品
            useGoods({ id: item.id }).then(res => {
                if (res.code === 200) {
                    this.$message.success('使用成功');
                    window.location.reload();
                }
            })
        }
    }
};
</script>
<style lang="scss" scoped>
    .balance {
        color: #eb3b3b;
    }
    .avatar-uploader > .ant-upload {
        width: 110px;
        height: 110px;
    }
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
    .user-class .ant-form-item {
        margin-bottom: 2px !important;
    }
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }
    .div-class {
        float: right;
        color: blue;
        cursor: pointer;
    }
    .key-class {
        float: right;
        color: blue;
        cursor: pointer;
    }
    .gutter-example >>> .ant-row > div {
        background: transparent;
        border: 0;
    }
    .goods-box {
        margin-bottom: 20px;
    }
    .goods-box:hover {
        .gutter-box {
            border: 1px solid #ff6b00;
            border-bottom: 0;
        }
        .copyright-box {
            border: 1px solid #ff6b00;
            border-top: 0;
        }
        .copyright-box-null {
            border: 1px solid #ff6b00;
            border-top: 0;
        }
    }
    .gutter-box {
        margin: 0 auto;
        border: 1px solid #bfbfbf;
        border-bottom: 0;
        padding: 20px;
        max-width: 420px;
        text-align: center;
        background-image: url(~@/assets/goods_background.jpg);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .copyright-box,
    .copyright-box-null {
        color: #373d41;
        background: #f9e6d8;
        line-height: 40px;
        text-align: center;
        max-width: 420px;
        margin: 0 auto;
        border: 1px solid #bfbfbf;
        border-top: 0px;
    }
    .copyright-box-null {
        background: #ffffff;
    }
    .gutter-title {
        color: #373d41;
        height: 72px;
        overflow: hidden;
        font-size: 22px;
        text-align: left;
        font-weight: bold;
    }
    .googs-ul {
        padding: 10px;
        text-align: left;
    }

    .buy-div {
        width: 150px;
        height: 38px;
        background: #00a0e9;
        margin: auto;
        text-align: center;
        line-height: 38px;
        color: #f2f2f2;
        font-size: 16px;
        cursor: pointer;
        margin-top: 10px;
    }
    .tag-this {
        width: 150px;
        height: 38px;
        background: #ff6b00;
        margin: auto;
        text-align: center;
        line-height: 38px;
        color: #f2f2f2;
        font-size: 16px;
        margin-top: 10px;
    }
    .first-tit {
        .i-tit {
            text-align: left;
            font-size: 16px;
            font-weight: 700;
            line-height: 16px;
            color: #60666b;
            padding-bottom: 10px;
            border-bottom: 1px dashed #ccc;
            .module-wrap p {
                margin: 0;
                padding: 0;
            }
        }
        .goods-li {
            vertical-align: middle;
            color: rgba(71, 78, 83, 0.8);
            height: 365px;
            overflow-y: auto;
            text-align: left;
            word-wrap: break-word;
            img {
                width: 100% !important;
            }
        }
    }
    .gutter-img {
        height: 100px;
        img {
            height: 100%;
        }
    }
    .btn-click {
        width: 94px;
        text-align: center;
    }
</style>